<template>
  <div class="customization">
    <header><HeaderTop name="马儿定制" /></header>
    <div class="header_con">
      <div class="header_bar">
        <div class="private">私人定制</div>
        <div class="firm">企业定制</div>
      </div>
    </div>
    <div class="form-box">
      <div class="vant-form-box">
        <!-- 目的地 -->
        <van-field
          v-model="destination"
          is-link
          readonly
          name="picker"
          placeholder="目的地（必填）"
          @click="showPickerDestination = true"
        />
        <van-popup v-model:show="showPickerDestination" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirmDestination"
            @cancel="showPickerDestination = false"
          />
        </van-popup>
        <!-- 出游时间 -->
        <van-field
          v-model="resultTime"
          is-link
          readonly
          name="datePicker"
          placeholder="预计出游时间（非必填）"
          @click="showPickerTime = true"
        />
        <van-popup v-model:show="showPickerTime" position="bottom">
          <van-date-picker
            @confirm="onConfirmTime"
            @cancel="showPickerTime = false"
          />
        </van-popup>
        <!-- 名字 -->
        <van-field v-model="username" placeholder="您的名字（非必填项）" />
        <div class="btn">免费获取方案</div>
        <ul class="form-btm">
          <li>1V1专属定制</li>
          <li>2小时极速方案</li>
          <li>7*24H行中服务</li>
        </ul>
      </div>
    </div>
    <div class="serve">
      <p>10项专属定制服务</p>
      <ul>
        <li>
          <van-icon name="coupon" size="22" />
          <p>往返机票</p>
        </li>
        <li>
          <van-icon name="wap-home" size="22" />
          <p>精选酒店</p>
        </li>
        <li>
          <van-icon name="logistics" size="22" />
          <p>目的地交通</p>
        </li>
        <li>
          <van-icon name="user-o" size="22" />
          <p>中文导游</p>
        </li>
        <li>
          <van-icon name="friends" size="22" />
          <p>旅游管家</p>
        </li>
        <li>
          <van-icon name="map-marked" size="22" />
          <p>行程设计</p>
        </li>
        <li>
          <van-icon name="cluster" size="22" />
          <p>特色体验</p>
        </li>
        <li>
          <van-icon name="send-gift" size="22" />
          <p>签证</p>
        </li>
        <li>
          <van-icon name="gift-card" size="22" />
          <p>保险</p>
        </li>
        <li>
          <van-icon name="service" size="22" />
          <p>随身WIFI</p>
        </li>
      </ul>
    </div>
    <!-- 热门目的地 -->
    <HotMdd :xI="hotImg" :xC="hotMdd" />
    <!-- 人气定制师 -->
    <PopularityDzs :xI="popularityDzImg" :xC="popularityDzs" />
    <!-- 明星推荐 -->
    <Star :xI="starImg" />
    <loading :isShow="show" />
  </div>
</template>

<script setup>
import { reqCustomize, reqDzs } from "@/api/customize";
import { ref } from "vue";
import HeaderTop from "@/components/HeaderTop.vue";
import PopularityDzs from "./Component/PopularityDzs.vue";
import HotMdd from "./Component/HotMdd.vue";
import Star from "./Component/Star.vue";
import loading from "@/components/loading.vue";
let show = ref(true);
//热门目的地
let hotImg = ref("");
let hotMdd = ref("");
//人气定制师推荐
let popularityDzImg = ref("");
let popularityDzs = ref("");
// 明星推荐
let starImg = ref("");
const loadCustomize = async () => {
  const result = await reqCustomize();
  console.log(result);
  if (result.code == 0) {
    hotMdd.value = result.data.data[2].data;
    hotImg.value = result.data.data[1].data[0].img;
    popularityDzImg.value = result.data.data[3].data[0].img;
    const popularityDzs = result.data.data[4].data;
    let popularityDzsIds = popularityDzs.map((item) => item.id);
    loadPopularityDzs(popularityDzsIds);
    starImg.value = result.data.data[5].data[0];
    show.value = false;
    console.log(starImg.value);
  }
};
loadCustomize();
//获取定制师信息
const loadPopularityDzs = async (ids) => {
  const result = await reqDzs({ ids });
  if (result.code == 0) {
    popularityDzs.value = result.data.list;
  }
};
// 目的地
const destination = ref("");
const showPickerDestination = ref(false);
const columns = [
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
];

const onConfirmDestination = ({ selectedOptions }) => {
  destination.value = selectedOptions[0]?.text;
  showPickerDestination.value = false;
};
// 出游时间;
const resultTime = ref("");
const showPickerTime = ref(false);
const onConfirmTime = ({ selectedValues }) => {
  resultTime.value = selectedValues.join("/");
  showPickerTime.value = false;
};
const username = ref("");
</script>
<style scoped>
.customization {
  width: 100%;
  padding-bottom: 52px;
}

.header_top {
  height: 0.88rem;
  font-size: 0.3rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 0.88rem;
  border-bottom: 1px solid #eee;
  color: #333;
  padding: 0 15px;
}
.header_con {
  height: 3.6rem;
  background: center no-repeat
    url(https://product-ssl-qiniu.bmtrip.com/product_5e996d1a5a1e2.jpg?imageView2/4/w/750/h/360/format/jpg/interlace/1/q/80);
  background-size: 100% 100%;
  position: relative;
  margin-top: 44px;
}
.header_bar {
  width: 6.8rem;
  height: 1rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
.private {
  width: 3.4rem;
  border-radius: 0.1rem 0 0 0;
  line-height: 1rem;
  color: #c14374;
  font-size: 0.26rem;
  position: relative;
  background: #ffffff;
  text-align: center;
}
.firm {
  width: 3.4rem;
  line-height: 1rem;
  font-size: 2.6rem;
  color: #fff;
  letter-spacing: 0.02133rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0 0.1rem 0 0;
  font-size: 0.32rem;
}
.form-box {
  height: 6rem;
  width: 6.8rem;
  margin: 0 auto;
  box-shadow: 0 0 0.21333rem 0 rgb(0 0 0 / 8%);
  border-radius: 0 0 0.08rem 0.08rem;
}
.vant-form-box {
  width: 6.03rem;
  height: 6rem;
  margin: 0 auto;
}
.btn {
  color: white;
  background: rgb(193, 67, 116);
  border-color: rgb(193, 67, 116);
  width: 300px;
  height: 44px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}
.form-btm {
  height: 0.16rem;
  display: flex;
  justify-content: space-between;
}
.form-btm li {
  display: flex;
  align-items: center;
  font-size: 0.12rem;
  color: #898989;
}
.serve {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.3rem;
  font-size: 0.32rem;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.serve p {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.32rem;
  text-align: center;
}
.serve ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3rem;
}
.serve ul li {
  width: 1.2rem;
  height: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.serve ul li p {
  font-size: 12px;
  display: flex;
  justify-content: center;
}
</style>
